<template>
    <div class="container" :class="isOpenNav ? 'navActive' : ''">
        <div class="mainBox">
            <div class="nav">
                <ul class="navList">
                    <li class="navListItem" v-for="(item, index) in navList" :key="index" @click="toUrl(item)">{{ item.title }}</li>
                </ul>
            </div>
            <div class="toBottom iconfont icon-xiangxia" @click="toBottom"></div>
            <div class="homeImg"></div>
            <div class="head">
                <div class="logoName">
                    QM'S BLOG
                </div>
                <div class="menu" @click="openNav">
                    <i class="iconfont" :class="isOpenNav ? 'icon-guanbi' : 'icon-menu'"></i>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="contentTitle">
                <i class="iconfont icon-shuye icon1"></i>
                <span>文章</span>
            </div>
            <div class="contentItem" v-for="item in articleList" :key="item.id">
               <div class="header">
                   <img class="img" :src="item.image.url" alt="" v-if="item.image.url">
                   <img class="img" src="../assets/img/default.jpg" v-else alt="">
                   <div class="articleTitile" @click="toDetail(item.id)">{{ item.title }}</div>
               </div>
               <div class="timer">
                   <i class="iconfont icon-shijian icon2"></i>
                   <span>{{ item.createTime }}</span>
               </div>
               <div class="mainContent">
                   <p>{{ item.describe }}</p>
               </div>
               <div class="info">
                   <div class="infoItem">
                       <i class="iconfont menuIcon icon-zimu"></i>
                       <span class="num">{{ item.wordsNum }}</span>
                   </div>
                   <div class="infoItem">
                       <i class="iconfont menuIcon icon-guankan"></i>
                        <span class="num">{{ item.read }}</span>
                   </div>
                   <div class="infoItem">
                       <i class="iconfont menuIcon icon-pinglun"></i>
                       <span class="num">{{ item.discuss }}</span>
                   </div>
                   <div class="infoItem ">
                       <i class="iconfont menuIcon icon-xihuan"></i>
                        <span class="num">{{ item.like }}</span>
                   </div>
                   <div class="infoItem ">
                       <i class="iconfont menuIcon icon-lishuyu"></i>
                        <span class="num">{{ item.articleType.typeName }}</span>
                   </div>
               </div>
            </div>
           <load-more :loadType="loadType" @getList="getList"></load-more>
        </div>
    </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { setScroll } from '../plugin/index'
import { Article } from '../plugin/request'
import LoadMore from '../components/loadMore.vue'
export default {
    components: {
        LoadMore
    },
    setup() {
        const state = reactive({
            isOpenNav: false,
            loadType: 1,
            page: 1,
            navList: [
                {
                    title: '文章',
                    url: '/article'
                },
                {
                    title: '生活',
                    url: '/life'
                },
                {
                    title: '留言板',
                    url: '/messageBoard'
                },
                {
                    title: '关于',
                    url: '/about'
                }
            ],
            articleList: [
                // {
                //     articleType: {
                //         typeName: ''
                //     },
                //     image: {
                //         url: ''
                //     }
                // }
            ]
        })
        let dom
        onMounted(() => {
            dom = document.querySelector('.indexBox')
            getArticle()
        })
        const getList = () => {
            state.loadType = 3
            state.page++
            setTimeout(() => {
                getArticle()
            }, 3000);
        }
        const getArticle = async () => {
            let { data } = await Article({'page': state.page})
            if(data.status == 1){
                state.articleList.push(...data.data.data)
                if(data.data.data.length < 5){
                    state.loadType = 2
                }else{
                    if(state.page != 1) toBottom()
                    state.loadType = 1
                }
                console.log(data);
            }
        }
        const router = useRouter()
        const openNav = () => {
            dom ? dom.scrollTop = 0  : ''
            state.isOpenNav = !state.isOpenNav
            if(dom) {
                state.isOpenNav ? dom.style.overflow = 'hidden' : dom.style.overflow = ''
            }
        }
        const toUrl = (item) => {
            dom.style.overflow = ''
            router.push(`${item.url}`)
        }
        const toBottom = () => {
            setScroll(dom)
        }
        const toDetail = id => {
            router.push(`/detail/${id}`)
        }
        return {
            ...toRefs(state),
            openNav,
            toUrl,
            toBottom,
            getList,
            toDetail
        }
    }
}
</script>

<style lang="scss" scoped>
    .container{
        .mainBox{
            .nav{
                position: absolute;
                width: 100%;
                height: 100vh;
                top: -100vh;
                background-color: #fff;
                z-index: 10;
                transition: top .5s;
                display: flex;
                justify-content: center;
                align-items: center;
                .navList{
                    width: 80%;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    padding-left: 0;
                    .navListItem{
                        list-style: none;
                        padding: 10px;
                        color: #666;
                        font-size: 24px;
                        cursor: pointer;
                    }
                }
            }
            position: relative;
            .toBottom{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                color: #ffffff;
                font-size: 40px;
                z-index: 10;
                width: 40px;
                animation: move 1s infinite;
                cursor: pointer;
            }
            .homeImg{
                background: url('../assets/img/banner.jpg');
                width: 100%;
                height: 100vh;
                background-position: 10%;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .head{
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                padding: 10px 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #ffffff;
                z-index: 11;
                .logoName{
                    font-size: 36px;
                }
                .menu{
                    i{
                        font-size: 36px;
                        cursor: pointer;
                    }
                }
            }
        }
        
        .content{
            width: 1000px;
            margin: 0 auto;
            padding-bottom: 40px;
            .contentTitle{
                height: 70px;
                line-height: 70px;
                font-size: 24px;
                .icon1{
                    color: #2ecc71;
                    font-size: 22px;
                }
            }
            .contentItem{
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                margin-bottom: 20px;
                border-radius: 10px;
                padding: 20px 50px;
                transition: all 0.5s;
                letter-spacing: 1px;
                &:hover{
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 32px 0 rgba(0, 0, 0, 0.1);
                }
                .header{
                    display: flex;
                    align-items: center;
                    .img{
                        width: 40px;
                        height: 40px;
                    }
                    .articleTitile{
                        margin-left: 10px;
                        padding: 10px;
                        cursor: pointer;
                        font-size: 20px;
                        overflow: hidden;
                        display: -webkit-box;//将元素设为盒子伸缩模型显示
                        -webkit-box-orient: vertical;//伸缩方向设为垂直方向
                        -webkit-line-clamp: 2;//超出3行隐藏，并显示省略号
                        &:hover{
                            color: #98acf8;
                            background: radial-gradient(circle at 10px -7px,transparent 8px,currentColor 0,currentColor 9px,transparent 0) repeat-x,radial-gradient(circle at 10px 27px,transparent 8px,currentColor 0,currentColor 9px,transparent 0) repeat-x;
                            background-size: 20px 20px;
                            background-position: -10px calc(100% + 16px),0 calc(100% - 4px);
                            animation: waveFlow 1s linear infinite;
                        }
                        @keyframes waveFlow {
                            from { background-position-x: -10px, 0; }
                            to { background-position-x: -30px, -20px; }
                        }
                    }
                }
                .timer{
                    line-height: 30px;
                    color: #989898;
                    font-size: 14px;
                    .icon2{
                        margin-right: 2px;
                    }
                }
                .mainContent{
                    color: #666;
                    font-size: 16px;
                    margin: 30px 0;
                    height: 50px;
                   p{
                        overflow: hidden;
                        display: -webkit-box;//将元素设为盒子伸缩模型显示
                        -webkit-box-orient: vertical;//伸缩方向设为垂直方向
                        -webkit-line-clamp: 3;//超出3行隐藏，并显示省略号
                   }
                }
                .info{
                    display: flex;
                    flex-wrap: wrap;
                    .infoItem{
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        margin-right: 20px;
                        color: #666;
                        .menuIcon{
                            cursor: pointer;
                            margin-right: 2px;
                        }
                    }
                }
            }
        }
    }
    .navActive{
        overflow: hidden;
        .mainBox{
            .nav{
                top: 0;
            }
            .head{
                color: #000000;
            }
        }
    }
    @mixin keyframes($animationName) {
        @-webkit-keyframes #{$animationName} {
            @content;
        }
        @-moz-keyframes #{$animationName} {
            @content;
        }
        @-o-keyframes #{$animationName} {
            @content;
        }
        @keyframes #{$animationName} {
            @content;
        }
    }
    @include keyframes(move) {
        0% {
            bottom: 10px;
        }
        25% {
            bottom: 15px;
        }
        50% {
            bottom: 20px;
        }
        75% {
            bottom: 15px;
        }
        100% {
            bottom: 10px;
        }
    }
    @media screen and (max-width: 768px) {
        .container {
            .mainBox{
                .nav{
                    .navList{
                        .navListItem{
                            font-size: 20px;
                        }
                    }
                }
                .head{
                    padding: 10px 20px;
                    .logoName{
                        font-size: 24px;
                    }
                    .menu{
                        i{
                            font-size: 30px;
                        }
                    }
                }
            }
            .content{
                width: 90%;
                .contentItem{
                    padding: 20px;
                    .timer{
                        font-size: 12px;
                    }
                    .mainContent{
                        font-size: 14px;
                    }
                    .info{
                        .infoItem{
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
</style>